<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>文本</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="../.package/css/sui.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    <link rel="shortcut icon" href="assets/ico/favicon.png">
    <script src="../js/lib/jquery.js"></script>
    <script src="../.package/js/sui.js"></script>
    <!--[if lt IE 9]><script src="assets/js/html5shiv.js"></script><![endif]-->
  </head>
  <body>
        <div class="sui-navbar navbar-inverse navbar-fixed-top">
          <div class="navbar-inner">
            <div class="sui-container"><a href="./index.html" class="sui-brand"><i class="sui-icon icon-github-alt">&nbsp;</i>WQUI</a>
              <ul class="sui-nav">
                <li><a href="./index.html">首页</a></li>
                <li class="active"><a href="./global.html">组件库</a></li>
                <li><a href="./examples.html">案例</a></li>
                <li><a href="./tutorial.html">教程</a></li>
                <li><a href="./download.html">下载</a></li>
                <li><a href="./about.html">关于</a></li>
              </ul>
            </div>
          </div>
        </div>
    <div class="sui-layout">
      <div class="sidebar">
            <ul class="sui-nav nav-tabs nav-stacked nav-xlarge docs-sidenav">
              <li><a href="global.html"><i class="sui-icon icon-globe">&nbsp;</i>全局样式</a>
              </li>
              <li><a><i class="sui-icon icon-magic">&nbsp;</i>基础css<i class="sui-icon icon-angle-down pull-right"></i></a>
                <ul class="sui-nav nav-tabs nav-stacked">
                  <li><a href="buttons.html">按钮</a></li>
                  <li><a href="forms.html">表单</a></li>
                  <li><a href="icons.html">图标</a></li>
                </ul>
              </li>
              <li><a><i class="sui-icon icon-picture">&nbsp;</i>css组件<i class="sui-icon icon-angle-down pull-right"></i></a>
                <ul class="sui-nav nav-tabs nav-stacked">
                  <li><a href="msgs.html">提示消息</a></li>
                  <li><a href="steps.html">步骤条</a></li>
                  <li><a href="tab.html">标签页</a></li>
                  <li><a href="breadcrumb.html">面包屑</a></li>
                  <li><a href="pagination.html">分页器</a></li>
                  <li><a href="dropdown.html">下拉菜单</a></li>
                  <li><a href="progress.html">进度条</a></li>
                  <li><a href="loading.html">Loading</a></li>
                </ul>
              </li>
              <li><a><i class="sui-icon icon-shopping-cart">&nbsp;</i>js组件<i class="sui-icon icon-angle-down pull-right"></i></a>
                <ul class="sui-nav nav-tabs nav-stacked">
                  <li><a href="dialog.html">对话框</a></li>
                  <li><a href="tooltip.html">tooltip</a></li>
                  <li><a href="tab-js.html">标签页</a></li>
                  <li><a href="pagination-js.html">分页器</a></li>
                  <li><a href="dropdown-js.html">下拉菜单</a></li>
                  <li><a href="tree-js.html">级联选择</a></li>
                  <li><a href="datepicker.html">datepicker</a></li>
                </ul>
              </li>
            </ul>
      </div>
      <div class="content">
        <div class="content-inner">
          <div class="sui-page-header">
            <h1>文本</h1>
            <p class="sui-lead">不同功能和颜色的文本</p>
          </div>
          <h2>不同类型</h2>
          <ul class="sui-nav nav-tabs nav-large">
            <li class="active"><a href="#demo1" data-toggle="tab">示例</a></li>
            <li><a href="#code1" data-toggle="tab">代码</a></li>
          </ul>
          <style>
            .bs-docs-example ul {
              margin-bottom: 20px;
            }
            .bs-docs-example li {
              display: inline-block;
              margin: 0 10px 10px 0;
            }
          </style>
          <div class="tab-content">
            <div id="demo1" class="tab-pane active">
              <div class="bs-docs-example">
                <ul>
                  <li><span>默认文本</span></li>
                  <li><span class="sui-text-nav">导航文本</span></li>
                  <li><span class="sui-text-description">辅助说明</span></li>
                  <li><span class="sui-text-less-important">次级文本</span></li>
                  <li><span class="sui-text-disabled">禁用文本</span></li>
                  <li><span class="sui-text-help">说明提示</span></li>
                  <li><span class="sui-text-success">强调</span></li>
                  <li><span class="sui-text-warning">警告</span></li>
                  <li><span class="sui-text-error">错误</span></li>
                </ul>
              </div>
            </div>
            <div id="code1" class="tab-pane">
              <pre data-target="#demo1&gt;div" class="prettyprint linenums"></pre>
            </div>
          </div>
          <ul class="demo-operations clearfix">
            <li><a href="javascript:void(0)" data-target="#demo1&gt;div" class="copy-btn">复制代码</a></li>
          </ul>
          <div class="footer">
            <ul class="unstyled">
              <li>@time 2014.03.07</li>
              <li>@author 商家业务事业部-电商服务支撑平台-UED团队</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/zeroclipboard/ZeroClipboard.js"></script>
    <script src="assets/js/application.js"></script>
    <script src="http://localhost:3456/livereload.js"></script>
  </body>
</html>